import { Component } from "react";
class DemoEventFn extends Component {
  //改变状态
  constructor() {
    super();
    this.state = {
      count:10,
      title:'受控组建',
      title1:'非受控组件标题'
    }

    this.add = this.add.bind(this)
  }

  add(){
    console.log('this',this);
    this.setState({
      count:this.state.count+1
    })
  }
  //定义add为箭头函数
  add2=()=>{
    console.log('this',this);
  }
  getId = (e) => {
    console.log('e', e.target.dataset.id)
}
  render() { 
    return (
    <>
      {/* <input type="text" /><button>按钮</button> */}
      <h2>更改this指向</h2>
      count:{this.state.count}
      {/* <button onClick={this.add}>使用bind count++</button> */}
      <button onClick={this.add.bind(this)}>使用bind count++</button>
      {/* 箭头函数 */}
      <button onClick={()=>this.add()}>使用箭头函数的方式 count++</button>
      {/* 定义事件函数为箭头函数 */}
      <button onClick={this.add}>使用箭头函数的方式 count++</button>
      {/* 获取属性 */}
      <button data-id='100' onMouseLeave={(e)=>this.getId(e)}>点击跳转详情</button>
    </> 
    );
  }
}
 
export default DemoEventFn;